<script>
import TopNavbar from "@/components/common/TopNavbar.vue";
import LeftMenu from "@/components/common/LeftMenu.vue";
import Breadcrumb from "@/components/common/Breadcrumb.vue";

export default {
  name: "adminView",
  components: {Breadcrumb, LeftMenu, TopNavbar},

}
</script>

<template>
  <div id="app">
    <header class="header">
      <TopNavbar />
    </header>
    <main class="main">
      <div class="main-left-menu">
        <LeftMenu />
      </div>
      <div class="main-right-menu">
        <div class="main-right-breadcrumb">
          <Breadcrumb />
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
#app {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  background-color: rgb(247,249,252);
  background-size: cover;
}
.header {
  margin: 0;
  padding: 0;
  position: relative;
  height: 9%;
  width: 100%;
}
.main {
  display: flex;
  margin: 0;
  padding: 0;
  position: relative;
  height: 91%;
  width: 100%;
}
.main-left-menu {
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
  width: 10%;
}
.main-right-menu {
  display: flex;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
  width: 90%;
}
.main-right-breadcrumb {
  margin: 10px 0 0 0;
  padding: 0;
  position: relative;
  height: 8%;
  width: 100%;
}
</style>